<template>
    <div class="main">
        <ul class="list">
                <router-link :to="{path:'/shangpin'}">
                    <li v-for="item in list" :key="item.id">
                        <img :src="item.src">
                        <p class="p1">{{item.name}}</p>
                        <p class="p2">{{item.bao}}</p>
                        <p class="p3">{{item.money}}</p>
                    </li>
                
                </router-link>

            
        </ul>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                list:[
                    {
                        id:'01',
                        src:'http://pic2.ymatou.com/2021/09/18/18/62f00c41-a9dd-4d0b-872a-96e91e2ba6ee_1_1_n_w_i.jpg',
                        name:'泰国INWA樱幻玫瑰护发精油30粒/盒 免洗护发烫染改善...',
                        bao:'包邮包税',
                        money:'￥48.80'
                    },
                    {
                        id:'02',
                        src:'http://pic2.ymatou.com/2021/09/18/18/62f00c41-a9dd-4d0b-872a-96e91e2ba6ee_1_1_n_w_i.jpg',
                        name:'泰国INWA樱幻玫瑰护发精油30粒/盒 免洗护发烫染改善...',
                        bao:'包邮包税',
                        money:'￥48.80'
                    },
                    {
                        id:'03',
                        src:'http://pic2.ymatou.com/2021/09/18/18/62f00c41-a9dd-4d0b-872a-96e91e2ba6ee_1_1_n_w_i.jpg',
                        name:'泰国INWA樱幻玫瑰护发精油30粒/盒 免洗护发烫染改善...',
                        bao:'包邮包税',
                        money:'￥48.80'
                    }
                ]
            }
        }
    }
</script>

<style lang="scss" scoped>
.main{
    .list{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;

        background-color:#F5F7F7;
        li{
            width: 280px;
            height: 600px;
            font-size: 30px;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 10px;
            background-color: #fff;
            margin-bottom: 20px;
            img{
                width: 100%;
                height: 300px;
            }
            .p1{

            }
        }
        a{
            color: black;
        }
    }
}
</style>